<template>
  <view class="service_box" :class="{ mb: isMb }">
    <image
      v-if="!isUser"
      class="service_avatar service_avatar-service"
      :src="imgUrl"
      mode="widthFix"
    />
    <view class="service_info">
      <view :class="['service_name', isUser ? 'service_name-right' : '']">
        {{ name }}
      </view>
      <view class="service_content" :class="isUser ? 'service_name-right' : ''">
        <view class="service_talk" @contextmenu="quesCorTipsClick(text)">
          <text>
            {{ text }}
          </text>
          <view class="service_notes" v-if="!isUser && text !== ''"
            >由AI助手智能搜索和总结，仅供参考</view
          >
        </view>
        <!-- <rich-text :nodes="`<view class='service_talk' @contextmenu='quesCorTipsClick(text)'>${text}</view>`"></rich-text> -->
        <!-- <view v-if="showQuesCorTips && defaultQuestions.length !== 1" class="base_ques ques_type_one">
          <view
            v-for="(item,index) in defaultQuestions"
            :key="item"
            @click="quesCorTipsClick(item)"
            >{{ index }} {{ item }}
          </view>
        </view> -->
        <!-- <view v-if="showQuesResolveTips" class="base_ques ques_type_two">
          <view>你的问题是否得到解决</view>
          <view class="btn-group">
            <view class="resolve-btn">已解决</view>
            <view class="inject-btn">未解决</view>
          </view>
        </view> -->
      </view>
    </view>
    <image
      v-if="isUser"
      class="service_avatar service_avatar-user"
      :src="imgUrl"
      mode="widthFix"
    />
  </view>
</template>

<script setup>
import { defineProps, ref, getCurrentInstance, defineEmits } from "vue";

const { proxy } = getCurrentInstance();
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  imgUrl: {
    type: String,
    default: "",
  },
  isStaff: {
    type: Boolean,
    default: false,
  },
  showQuesCorTips: {
    type: Boolean,
    default: false,
  },
  showQuesResolveTips: {
    type: Boolean,
    default: false,
  },
  isMb: {
    type: Boolean,
    default: false,
  },
  text: {
    type: String,
    default: "",
  },
  isUser: {
    type: Boolean,
    default: false,
  },
  defaultQuestions: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["tipsClicked"]);
const quesCorrelationTips = ref();

const quesCorTipsClick = (tips) => {
  emit("tipsClicked", tips);
};
</script>
<style lang='less' scoped>
.service_box {
  display: flex;
  justify-content: space-between;

  .service_avatar {
    width: 84rpx !important;
    height: 84rpx !important;
    border-radius: 50%;
  }

  .service_avatar-service {
    margin-right: 24rpx;
  }

  .service_avatar-user {
    margin-left: 24rpx;
  }

  .service_info {
    display: flex;
    flex-direction: column;
    font-family: "ali", serif;
    font-size: 23rpx;
    flex: auto;

    .service_name {
      color: #9b9b9b;
      margin-bottom: 10rpx;
    }
    .service_name-right {
      text-align: end;
    }
    .service_content {
      max-width: 90vw;
      .service_talk {
        padding: 20rpx 20rpx 30rpx;
        background-color: #ffffff;
        color: #272636;
        width: max-content;
        max-width: 70vw;
        text-align: left;
        .service_notes {
          font-size: 18rpx;
          margin-top: 20rpx;
          text-align: right;
          color: #9d9ea3;
        }
      }
      .base_ques {
        font-size: 23rpx;
        margin-top: 50rpx;
      }

      .ques_type_one {
        color: #5590f6;
      }

      .ques_type_two {
        color: #00b588;

        .btn-group {
          display: flex;
          margin-top: 30rpx;

          .resolve-btn,
          .inject-btn {
            width: 100rpx;
            height: 40rpx;
            line-height: 40rpx;
            background-color: #f7f7f7;
            color: #3a3a3a;
            text-align: center;
            border-radius: 10rpx;
          }

          .inject-btn {
            margin-left: 20rpx;
          }
        }
      }
      &.service_name-right {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
      }
    }
  }
}

.mb {
  margin-bottom: 45rpx;
}
</style>
